<template>
    <p>count: {{ count }}</p>
    <p>countWatch: {{ countWatch }}</p>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'ref',
  setup () {
    const count = ref(0)
    const countWatch = ref(0)
    // watch(
    //   // getter 函数
    //   () => count.value + 1,
    //   (newValue) => {
    //     console.log('newValue', newValue)
    //     countWatch.value = newValue
    //   },
    //   {
    //     immediate: true
    //   }
    // )

    watch(
      // 一个想要侦听的响应式引用
      count,
      (newValue) => {
        countWatch.value = ++newValue
      },
      {
        immediate: true
      }
    )
    return {
      count,
      countWatch
    }
  }
}
// 结果：
// count: 1  countWatch: 1
</script>
